<template >
    <div class="selectBox" v-if="ok">
        <span>用户组</span>
        <el-select
            v-model="value"
            clearable
            filterable
            placeholder="请选择"
            @change="change">
                <el-option
                v-for="item in userGroupsArr"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
        </el-select>
    </div>
    <div v-else>
        &nbsp;
    </div>
</template>
<script>
import {getUserGroupSelect} from '@/api/userGroup'
import { mapGetters } from 'vuex'
import {userGroupSelectLevel} from '@/utils/static_data'
export default{
    data(){
        return {
            userGroupsArr:[],
            ok: false,
            value: '',
            userGroupSelectLevel
        }
    },
    created(){
        const res = (this.userGroupSelectLevel).indexOf(this.roles[0])
        if(res !== -1){
            this.ok = true
            this.getUserGroupList()
        }
    },
    methods:{
        //获取用户组下拉框列表
        getUserGroupList(){
            getUserGroupSelect(response=> {
                const res = response.data
                if(res.code == 1){
                    this.userGroupsArr = res.data
                }
            })
        },
        change(value){
            this.$emit('setSelectVal', value)
        }
    },
    computed: {
        ...mapGetters([
        'roles'
        ])
    }
}
</script>
<style lang="stylesheet/scss" lang="scss" scoped>
    .selectBox{
        display: inline-block;
    }
</style>
